<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="请选择">
        <el-select
          v-model="cityId"
          clearable
          placeholder="请选择城市"
          @change="changeCity(cityId)"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>

        <el-select
          v-model="areaId"
          clearable
          placeholder="请选择地区"
          @change="selectArea(areaId)"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="影院名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="影院地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="最低价格">
        <el-input v-model="form.lowPrice"></el-input>
      </el-form-item>
      <slot></slot>
    </el-form>
  </div>
</template>


<script>
export default {
  data() {
    return {
      //城市选项
      areaName: "",
      cityName: "",
      cityOptions: [
        {
          value: "12",
          label: "33"
        },
        {
          value: "4",
          label: "z5"
        }
      ],
      cityId: "",

      //地区选项
      areaOptions: [
        {
          //ID
          value: "s5",
          //名称
          label: "2"
        },
        {
          value: "5",
          label: "6"
        }
      ],
      areaId: ""
    };
  },
  props: ["form", "cinema"],

  created() {
    this.getCityList();
    // this.changeCity();
    // this.selectArea();
  },
  methods: {
    async getCityList() {
      let url = "/city/allCity";
      let res = await this.$axios.get(url);
      let cities = res.cities;

      //清空选项

      //把数据给areaOptions去显示出来
      this.cityOptions = cities.map(city => {
        return {
          value: city.cityId,
          label: city.name
        };
      });
      (this.cityId = this.cinema.cityId), (this.areaId = this.cinema.areaName);
    },

    //切换城市
    async changeCity(cityId) {
      let url = "/area/findByCityId";
      let ur = "/city/findById";
      let data = {
        params: {
          cityId
        }
      };
       this.areaId = ''
      let city = await this.$axios.get(ur, data);
      console.log(city);
      this.cityName = city.city.name;
      let res = await this.$axios.get(url, data);
      let areas = res.areas;
      this.areaOptions = areas.map(area => {
        return {
          value: area.areaId,
          label: area.name
        };
      });
    },

    // 切换区域
    async selectArea(areaId) {
      let url = "/area/getDetail";
      let res = await this.$axios.post(url, { areaId });
      this.areaName = res.area.name;
      console.log("aa", res);
      let data = {
        areaId,
        cityId: this.cityId,
        cityName: this.cityName,
        areaName: this.areaName
      };

      this.$emit("getInfo", data);
    }
  }
};
</script>